<template>
    <div class="all-list">
        <el-card class="container mt-4">
            <div slot="header" class="clearfix">
                <span><span class="card-header-box"></span>信息打印</span>
                <a href="javascript:;" class="list-button float-right p-1" @click="logout">登出</a>
                <a v-if="user.type === '录入'" href="javascript:;" class="list-button float-right mr-3" @click="toEnrollSituation">查看结果</a>
            </div>
            <div class="pt-5 pb-5 print-table" id="print-table" style="font-size: 20px;text-align: center;font-family: 宋体;">
                <div class="ml-auto mr-auto" style="width: 900px;font-family: 宋体;text-align: center;font-size: 33px;margin-top: 30px">静海{{ list[0].school_name}}2018年新生入园报名信息确认表</div>
                <table class="ml-auto mr-auto border-bottom-0" border="1" bordercolor="#000" width="900px"
                       style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center;border-style: solid;border-bottom: none">
                    <tbody>
                        <tr class="first-tr" style="height: 50px;">
                            <td style="width:220px">幼儿姓名</td>
                            <td style="width:93px">{{ list[0].name }}</td>
                            <td style="width:90px">性别</td>
                            <td style="width:90px">{{ isSex(list[0].sex) }}</td>
                            <td style="width:120px">民族</td>
                            <td style="width:80px">{{ list[0].nation }}</td>
                            <td style="width:100px">幼儿与户主关系</td>
                            <td style="width:104px">{{ list[0].relation }}</td>
                        </tr>
                    </tbody>
                <!--</table>-->
                <!--<table class="ml-auto mr-auto border-bottom-0 table-2" border="1" bordercolor="#000" width="900px"-->
                       <!--style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center;">-->
                    <tbody>
                        <tr class="sec-tr" style="height: 50px;border-bottom:1px solid #000">
                            <td>幼儿身份证号</td>
                            <td colspan="3">{{ list[0].id_code }}</td>
                            <td colspan="2">儿童预防接种证号码</td>
                            <td colspan="2">{{ list[0].prophylactic_code }}</td>
                        </tr>
                        <tr style="height: 50px;border-bottom:1px solid #000">
                            <td>幼儿户籍所属派出所</td>
                            <td colspan="2">{{ list[0].police_name }}</td>
                            <td colspan="2">家庭住址</td>
                            <td colspan="3" style="font-size: 20px">{{ list[0].family_address }}</td>
                        </tr>
                        <tr style="height: 50px;border-bottom:1px solid #000">
                            <td>幼儿择园意向</td>
                            <td colspan="7">{{ list[0].school_name }}</td>
                        </tr>
                        <tr style="height: 50px;border-bottom:1px solid #000">
                            <td width="220px">是否双(多)胞胎</td>
                            <td>{{ list[0].is_twins ? '是' : '否' }}</td>
                            <td colspan="4">是否同意绑定双(多)胞胎进行统一派位</td>
                            <td colspan="3">{{ list[0].twins > 1 ? '是' : '否' }}</td>
                        </tr>
                        <tr v-if="list.length > 1" style="height: 50px;border-bottom:1px solid #000">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td>{{ list[1].name }}</td>
                            <td>幼儿身份证号</td>
                            <td colspan="2">{{ list[1].id_code}}</td>
                            <td >儿童预防接种证号码</td>
                            <td colspan="2">{{ list[1].prophylactic_code }}</td>
                        </tr>
                        <tr v-else style="height: 50px;border-bottom:1px solid #000">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td width="93px"></td>
                            <td>幼儿身份证号</td>
                            <td colspan="2"></td>
                            <td>儿童预防接种证号码</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr v-if="list.length > 2" style="height: 50px;">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td>{{ list[2].name }}</td>
                            <td>幼儿身份证号</td>
                            <td colspan="2">{{ list[2].id_code}}</td>
                            <td>儿童预防接种证号码</td>
                            <td colspan="2">{{ list[2].prophylactic_code }}</td>
                        </tr>
                        <tr v-else style="height: 50px;border-bottom:1px solid #000">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td width="93px"></td>
                            <td>幼儿身份证号</td>
                            <td colspan="2"></td>
                            <td>儿童预防接种证号码</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr v-if="list.length > 3" class="border-bottom-0" style="height: 50px;">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td>{{ list[3].name }}</td>
                            <td>幼儿身份证号</td>
                            <td colspan="2">{{ list[3].id_code}}</td>
                            <td>儿童预防接种证号码</td>
                            <td colspan="2">{{ list[3].prophylactic_code }}</td>
                        </tr>
                        <tr v-else="" class="border-bottom-0" style="height: 50px;border-color: #000">
                            <td>双(多)胞胎幼儿姓名</td>
                            <td width="93px"></td>
                            <td>幼儿身份证号</td>
                            <td colspan="2"></td>
                            <td>儿童预防接种证号码</td>
                            <td colspan="2"></td>
                        </tr>
                    </tbody>
                </table>
                <table  border="1" bordercolor="#000" width="900px" class="ml-auto mr-auto"
                        style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center">
                    <tbody>
                        <tr class="" style="height: 50px; font-weight: 600;border-top-color: transparent">
                            <td width="35px" rowspan="4" style="font-weight: normal">监护人信息</td>
                            <td width="115px">关系</td>
                            <td width="115px">姓名</td>
                            <td width="160px">身份证号</td>
                            <td width="290px">工作单位</td>
                            <td width="110px">有效联系电话</td>
                        </tr>
                        <tr style="height: 80px;">
                            <td>{{ list[0].father_type }}</td>
                            <td>{{ list[0].father_name }}</td>
                            <td>{{ list[0].father_id_code }}</td>
                            <td style="font-size: 20px">{{ list[0].father_works }}</td>
                            <td>{{ list[0].father_phone_number }}</td>
                        </tr>
                        <tr style="height: 80px;">
                            <td>{{ list[0].mother_type }}</td>
                            <td>{{ list[0].mother_name }}</td>
                            <td>{{ list[0].mother_id_code }}</td>
                            <td>{{ list[0].mother_works }}</td>
                            <td>{{ list[0].mother_phone_number }}</td>
                        </tr>
                        <tr style="height: 80px">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr style="height: 250px;">
                            <td width="35px">招生办法</td>
                            <td class="pt-5 pb-5" colspan="5" style="text-align: left;line-height: 25px;font-size: 20px">
                                &nbsp;&nbsp;1.原则上本幼儿园报名登记总人数小于或等于招生计划人数，则报名登记幼儿全部录取。<br>
                                <br>&nbsp;&nbsp;2.原则上本幼儿园报名登记总人数超过招生计划人数，则采取电脑随机派位方式确定招生对象。(派位现场由公证处公证，人大代表、政协委员、家长代表等参与监督，保证公平公正录取。)<br>
                                <!--<br>&nbsp;&nbsp;&nbsp;&nbsp;今年我园小班幼儿报名登记总人数为{{ list.registration_numbers }}名,如果超过幼儿园招生计划数，将采取电脑随机派位方式确定招生对象。-->
                                <br>&nbsp;&nbsp;我园将根据实际报名人数，确定是否采取电脑随机派位录取，具体公布时间为4月25日下午。
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table border="1" bordercolor="#000" width="900px" class="ml-auto mr-auto"
                       style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center">
                    <tbody>
                        <tr style="height: 150px;border-top-color: transparent">
                            <td width="35px">家长承诺</td>
                            <td style="text-align: left;font-size: 20px">&nbsp;&nbsp;我已经认真核实相关信息无误，详细阅读并交接了今年幼儿园招生政策和办法,经与家人协商慎重考虑后，选择填报你园，我们将自愿接受由此产生的最终后果。</td>
                            <td width="220px"  class="pt-5 pb-5 pl-3" style="text-align: left"> 家长签字：</td>
                        </tr>
                    </tbody>
                </table>
                <div class="footer-sign" style="font-family: 宋体;font-size: 20px;float: right;text-align: center;margin-right: 100px;">
                    <div style="line-height: 40px">天津市静海{{ list[0].school_name }}（盖章）</div>
                    <div style="line-height: 16px">年&nbsp;&nbsp;月&nbsp;&nbsp;日</div>
                </div>
            </div>


            <div class="pt-5 pb-5 see-table" style="font-size: 20px;text-align: center;font-family: 宋体;">
                <div class="ml-auto mr-auto" style="width: 900px;font-family: 宋体;text-align: center;font-size: 33px;margin-top: 30px">静海{{ list[0].school_name}}2018年新生入园报名信息确认表</div>
                <table class="ml-auto mr-auto border-bottom-0" border="1" bordercolor="#000" width="900px"
                       style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center;border-style: solid;border-bottom: none">
                    <tbody>
                    <tr class="first-tr" style="height: 50px;">
                        <td style="width:220px">幼儿姓名</td>
                        <td style="width:93px">{{ list[0].name }}</td>
                        <td style="width:90px">性别</td>
                        <td style="width:90px">{{ isSex(list[0].sex) }}</td>
                        <td style="width:120px">民族</td>
                        <td style="width:80px">{{ list[0].nation }}</td>
                        <td style="width:100px">幼儿与户主关系</td>
                        <td style="width:104px">{{ list[0].relation }}</td>
                    </tr>
                    </tbody>
                    <!--</table>-->
                    <!--<table class="ml-auto mr-auto border-bottom-0 table-2" border="1" bordercolor="#000" width="900px"-->
                    <!--style="border-collapse:collapse;font-family: 宋体;font-size: 20px;text-align: center;">-->
                    <tbody>
                    <tr class="sec-tr" style="height: 50px;border-bottom:1px solid #000">
                        <td>幼儿身份证号</td>
                        <td colspan="3">{{ list[0].id_code }}</td>
                        <td colspan="2">儿童预防接种证号码</td>
                        <td colspan="2">{{ list[0].prophylactic_code }}</td>
                    </tr>
                    <tr style="height: 50px;border-bottom:1px solid #000">
                        <td>幼儿户籍所属派出所</td>
                        <td colspan="2">{{ list[0].police_name }}</td>
                        <td colspan="2">家庭住址</td>
                        <td colspan="3">{{ list[0].family_address }}</td>
                    </tr>
                    <tr style="height: 50px;border-bottom:1px solid #000">
                        <td>幼儿择园意向</td>
                        <td colspan="7">{{ list[0].school_name }}</td>
                    </tr>
                    <tr style="height: 50px;border-bottom:1px solid #000">
                        <td width="220px">是否双(多)胞胎</td>
                        <td>{{ list[0].is_twins ? '是' : '否' }}</td>
                        <td colspan="4">是否同意绑定双(多)胞胎进行统一派位</td>
                        <td colspan="3">{{ list[0].twins > 1 ? '是' : '否' }}</td>
                    </tr>
                    <tr v-if="list.length > 1" style="height: 50px;border-bottom:1px solid #000">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td>{{ list[1].name }}</td>
                        <td>幼儿身份证号</td>
                        <td colspan="2">{{ list[1].id_code}}</td>
                        <td >儿童预防接种证号码</td>
                        <td colspan="2">{{ list[1].prophylactic_code }}</td>
                    </tr>
                    <tr v-else style="height: 50px;border-bottom:1px solid #000">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td width="93px"></td>
                        <td>幼儿身份证号</td>
                        <td colspan="2"></td>
                        <td>儿童预防接种证号码</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr v-if="list.length > 2" style="height: 50px;">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td>{{ list[2].name }}</td>
                        <td>幼儿身份证号</td>
                        <td colspan="2">{{ list[2].id_code}}</td>
                        <td>儿童预防接种证号码</td>
                        <td colspan="2">{{ list[2].prophylactic_code }}</td>
                    </tr>
                    <tr v-else style="height: 50px;border-bottom:1px solid #000">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td width="93px"></td>
                        <td>幼儿身份证号</td>
                        <td colspan="2"></td>
                        <td>儿童预防接种证号码</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr v-if="list.length > 3" class="border-bottom-0" style="height: 50px;">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td>{{ list[3].name }}</td>
                        <td>幼儿身份证号</td>
                        <td colspan="2">{{ list[3].id_code}}</td>
                        <td>儿童预防接种证号码</td>
                        <td colspan="2">{{ list[3].prophylactic_code }}</td>
                    </tr>
                    <tr v-else="" class="border-bottom-0" style="height: 50px;border-color: #000">
                        <td>双(多)胞胎幼儿姓名</td>
                        <td width="93px"></td>
                        <td>幼儿身份证号</td>
                        <td colspan="2"></td>
                        <td>儿童预防接种证号码</td>
                        <td colspan="2"></td>
                    </tr>
                    </tbody>
                </table>
                <table  border="1" bordercolor="#000" width="900px" class="ml-auto mr-auto"
                        style="border-collapse:collapse;font-family: 宋体;text-align: center">
                    <tbody>
                    <tr class="" style="height: 50px; font-weight: 600;border-top-color: transparent">
                        <td width="35px" rowspan="4" style="font-weight: normal">监护人信息</td>
                        <td width="115px">关系</td>
                        <td width="115px">姓名</td>
                        <td width="160px">身份证号</td>
                        <td width="290px">工作单位</td>
                        <td width="110px">有效联系电话</td>
                    </tr>
                    <tr style="height: 80px;">
                        <td>{{ list[0].father_type }}</td>
                        <td>{{ list[0].father_name }}</td>
                        <td>{{ list[0].father_id_code }}</td>
                        <td>{{ list[0].father_works }}</td>
                        <td>{{ list[0].father_phone_number }}</td>
                    </tr>
                    <tr style="height: 80px;">
                        <td>{{ list[0].mother_type }}</td>
                        <td>{{ list[0].mother_name }}</td>
                        <td>{{ list[0].mother_id_code }}</td>
                        <td>{{ list[0].mother_works }}</td>
                        <td>{{ list[0].mother_phone_number }}</td>
                    </tr>
                    <tr style="height: 80px">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr style="height: 250px;">
                        <td width="35px">招生办法</td>
                        <td class="pt-5 pb-5" colspan="5" style="text-align: left;line-height: 25px;">
                            &nbsp;&nbsp;1.原则上本幼儿园报名登记总人数小于或等于招生计划人数，则报名登记幼儿全部录取。<br>
                            <br>&nbsp;&nbsp;2.原则上本幼儿园报名登记总人数超过招生计划人数，则采取电脑随机派位方式确定招生对象。(派位现场由公证处公证，人大代表、政协委员、家长代表等参与监督，保证公平公正录取。)<br>
                            <!--<br>&nbsp;&nbsp;&nbsp;&nbsp;今年我园小班幼儿报名登记总人数为{{ list.registration_numbers }}名,如果超过幼儿园招生计划数，将采取电脑随机派位方式确定招生对象。-->
                            <br>&nbsp;&nbsp;我园将根据实际报名人数，确定是否采取电脑随机派位录取，具体公布时间为4月25日下午。
                        </td>
                    </tr>
                    </tbody>
                </table>
                <table border="1" bordercolor="#000" width="900px" class="ml-auto mr-auto"
                       style="border-collapse:collapse;font-family: 宋体;text-align: center">
                    <tbody>
                    <tr style="height: 150px;border-top-color: transparent">
                        <td width="36px">家长承诺</td>
                        <td style="text-align: left">&nbsp;&nbsp;我已经认真核实相关信息无误，详细阅读并交接了今年幼儿园招生政策和办法,经与家人协商慎重考虑后，选择填报你园，我们将自愿接受由此产生的最终后果。</td>
                        <td width="220px"  class="pt-5 pb-5 pl-3" style="text-align: left"> 家长签字：</td>
                    </tr>
                    </tbody>
                </table>
                <div class="footer-sign" style="font-family: 宋体;font-size: 20px;float: right;text-align: center;margin-right: 100px;">
                    <div style="line-height: 40px">天津市静海{{ list[0].school_name }}（盖章）</div>
                    <div style="line-height: 16px">年&nbsp;&nbsp;月&nbsp;&nbsp;日</div>
                </div>
            </div>
            <div class="mt-5 mb-2 d-flex justify-content-center">
                <el-button type="primary" @click="backUpdate">返回修改</el-button>
                <el-button type="primary" @click="tableConfirm">完成</el-button>
                <el-button type="info" @click="printTable">打印</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
  import DataApi from '../api/data'
  import Cookie from 'js-cookie';
  export default {
    data(){
      return{
        list:{},
        user_id: 0
      }
    },
    created () {
      let vm = this
      vm.user_id = this.$route.params.user_id;
      this.isLoading = true
      Promise.all([
        DataApi.getPrintOut(vm.user_id)
      ]).then(([Response]) => {
        vm.list = Response.data.data
//        console.log(vm.list)
        vm.isLoading = false
      }).catch((error) => {
        vm.isLoading = false
      })
    },
    methods: {
      isSex(type){
        switch (type)
        {
          case '0':
            return '男'
            break;
          default:
            return '女'
        }
      },
      backUpdate(){
        this.$router.push({
          name: 'entering',
          params: {
            user_id: this.user_id
          }
        })
      },
      printTable(){
        DataApi.setlog(this.user_id).then(res=>{
          console.log(res)
          let printTable = document.getElementById('print-table');
//        console.log(printTable.innerHTML);
          let newContent =printTable.innerHTML;
          let oldContent = document.body.innerHTML;
          document.body.innerHTML = newContent;
          window.print();
          window.location.reload();
          document.body.innerHTML = oldContent;
        })
      },
      tableConfirm(){
        if(this.user.type === 'admin'){
          this.$router.push({
            name: 'all',
          })
        }else if(this.user.type === '编辑'){
          this.$router.push({
            path: '/home/all-list/' + this.user.school_id,
          })
        }else{
          this.$router.push({
            path: '/home/entering/0',
          })
        }
      },
      toEnrollSituation(){
        this.$router.push({
          name: 'only-enroll-situation',
        })
      },
      logout(){
        axios.post('/api/logout', {})
          .then(function (response) {
            Cookie.remove('user');
            window.location.reload();
          })
          .catch(function (error) {
            console.log(error);
          });
      },
    },
    computed:{
      user(){
        return this.$store.state.user
      }
    },
    watch: {
    },
  }
</script>
<style lang="scss" scoped>
    .all-list{
        .print-table{
            display: none;
        }
        .see-table{

        }
        table{
            font-size: 14px!important;
            text-align: center;
            tbody{
                tr {
                    td {
                        height: 27px;
                    }
                }
                .first-tr{
                 td{
                     width:100px;
                 }
                }
                .sec-tr{
                    td {
                        width: 100px;
                    }
                }
            }
        }
        .footer-sign{
            display: none;
            margin-right: 170px!important;
        }
    }
</style>
